<template>
  <!-- 周转卡表表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="75%"
    draggable
    @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100%">
      <el-card shadow="never" class="table-container">
        <div class="formTable2">
          <el-table
            height="100%"
            :data="formData.data"
            :key="Math.random"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="55" align="center" />
            <el-table-column
              label="计划编号"
              prop="processingOrderNumber"
              min-width="180"
              show-overflow-tooltip
            />
            <el-table-column
              label="产品名称"
              prop="materialName"
              min-width="180"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{ scope.row.materialName }}
              </template>
            </el-table-column>
            <el-table-column
              label="生产日期"
              prop="planDate"
              min-width="100"
              show-overflow-tooltip
              align="center"
              :formatter="formatDate"
            />
            <el-table-column
              label="炉号"
              prop="lNum"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="重量"
              prop="materialWeight"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="开始时间"
              prop="beginTime"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="结束时间"
              prop="endTime"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="区分"
              prop="dataDis"
              min-width="100"
              show-overflow-tooltip
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.dataDis === '1'">包</span>
                <span v-if="scope.row.dataDis === '2'">模</span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否合格"
              prop="isValid"
              min-width="100"
              show-overflow-tooltip
              align="center"
            >
              <template #default="scope">
                {{ scope.row.isValid === "1" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              min-width="160"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="创建人"
              prop="createdUserName"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="更新时间"
              prop="lastUpdateTime"
              min-width="160"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="更新人"
              prop="lastUpdatedUserName"
              min-width="100"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </el-card>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import { useDictionary } from "@/utils/useTable"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "MOLTENIRONDEIT",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

const rules = reactive({});

const formRef = ref(ElForm);

let formData = reactive({
  data: [],
});

watch(
  () => props.data,
  (newVal: any) => {
    const { planId } = newVal;
    console.log(planId);
    if (planId) {
      getTableList();
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formData.data = [];
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
//时间格式处理，yyyy-mm-dd
function formatDate(row, column) {
  const date = row[column.property];
  if (!date) return "";
  return date.split(" ")[0]; // 返回日期的年月日部分，而隐藏时间部分
}
async function getTableList() {
  await request({
    url: "/mes/mesproducintautodata/queryByList",
    method: "post",
    data: {
      planId: props.data.planId,
      dataType: "2",
    },
  }).then((res) => {
    formData.data = res.data;
  });
}
</script>
